<!--
 * @Description: vue3基础 API
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2021-04-05 14:16:15
 * @LastEditors: lhl
 * @LastEditTime: 2021-05-09 20:27:29
-->
<template>
  <div class="home">
    <van-notice-bar left-icon="volume-o" color="#1989fa" background="#ecf9ff" :text="loopText" />
    <!-- 懒加载轮播 -->
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="item in imagesList" :key="item.id">
        <img :src="item.imgUrl" />
      </van-swipe-item>
    </van-swipe>
    <van-grid clickable :column-num="3">
      <template v-for="item in gridList" :key="item.id">
        <van-grid-item :icon="item.icon" :text="item.text" :to="item.path" />
      </template>
    </van-grid>
    <div class="circle-box">
      <van-circle v-model:current-rate="currentRate" :rate="70" :speed="100" :text="text" />
      <van-circle
        v-model:current-rate="currentRate"
        rate="60"
        layer-color="rgb(238, 10, 36)"
        text="颜色定制"
      />
      <van-circle
        v-model:current-rate="currentRate"
        rate="50"
        :color="gradientColor"
        text="渐变色"
      />
    </div>
  </div>
</template>
<script lang="ts">
  import {
    defineComponent,
    toRefs,
    reactive,
    onMounted,
    getCurrentInstance,
    watch,
    computed,
    ref
  } from 'vue'
  import banner1 from '@/assets/images/banner1.jpg'
  import banner2 from '@/assets/images/banner2.jpg'
  import banner3 from '@/assets/images/banner3.jpg'
  import banner4 from '@/assets/images/banner4.jpg'
  import { useRouter } from 'vue-router'
  export default defineComponent({
    name: 'Home',
    setup(props, context) {
      console.log(props, context)
      // 'ctxt类似 vue2的 this'
      // const { ctx } = getCurrentInstance()
      // const router = ctx.$router
      console.log(getCurrentInstance(), 'getCurrentInstance组件实例')
      const router = useRouter()
      // 个人还是不推荐这样写  因为每次新建一个响应式数据就要ref包裹一下很麻烦
      const currentRate = ref(0) // ref包裹 变为响应式对象
      // 函数接收一个普通对象，返回一个响应式的数据对象
      const state = reactive({
        loopText: 'vant3太好用了太棒了！！！vue3是vue2的大版本升级',
        text: computed(() => currentRate.value.toFixed(0) + '%'),
        gradientColor: {
          '0%': '#3fecff',
          '100%': '#6149f6'
        },
        imagesList: [
          {
            id: 1,
            imgUrl: banner1
          },
          {
            id: 2,
            imgUrl: banner2
          },
          {
            id: 3,
            imgUrl: banner3
          },
          {
            id: 4,
            imgUrl: banner4
          }
        ],
        gridList: [
          {
            id: 1,
            icon: 'home-o',
            text: '个人中心',
            path: 'https://img.yzcdn.cn/vant/apple-1.jpg'
          },
          {
            id: 2,
            icon: 'like-o',
            text: '收藏',
            path: 'https://img.yzcdn.cn/vant/apple-2.jpg'
          },
          {
            id: 3,
            icon: 'setting-o',
            text: '设置',
            path: 'https://img.yzcdn.cn/vant/apple-1.jpg'
          },
          {
            id: 4,
            icon: 'phone-o',
            text: '联系方式',
            path: 'https://img.yzcdn.cn/vant/apple-2.jpg'
          },
          {
            id: 5,
            icon: 'vip-card-o',
            text: 'VIP通道',
            path: 'https://img.yzcdn.cn/vant/apple-1.jpg'
          },
          {
            id: 6,
            icon: 'idcard',
            text: '卡通道',
            path: 'https://img.yzcdn.cn/vant/apple-2.jpg'
          }
        ]
      })
      // 计算属性写法 别忘记引入 computed
      const computedData = {
        newText: computed(() => state.text + '@@')
      }
      const methods = {
        goNext() {
          // 路由跳转
          router.push({
            name: 'my'
          })
        }
      }
      onMounted(() => {
        console.log('组件挂载')
      })
      // watch的使用
      watch(
        () => state.text,
        (value) => {
          // console.log('text改变', value)
        }
      )
      return {
        currentRate,
        ...computedData,
        ...toRefs(state), // 将响应式的对象变为普通对象 使用时不需要state.num 直接 num 即可使用
        ...methods // 解构赋值
      }
    }
  })
</script>
<style lanng="less" scoped>
  .home {
    height: 40px;
  }
  .circle-box {
    padding: 20px;
    text-align: center;
  }
  img {
    max-width: 100%;
    max-height: 100%;
  }
</style>
